Add flairs CSS animations #3027
Conversation
Youtube forces us to follow their branding guidelines to the letter, so we need to force a minimum height of 20px for the icon path inside the svg. For the Brainzplayer UI I made all icons bigger, for the artist page just the youtube icon.
This will be done in part 2, in the meantime since this page is out, clarify that they are coming soon, as suggested by aerozol
Updated AddData.tsx with ListenBrainz macOS Scrobbler for Music.app
Donations: add a note that user flairs are coming soon
Force size of icons for Youtube
…crobbler-for-Music.app Update AddData.tsx with ListenBrainz macOS Scrobbler for Music.app
Co-authored-by: Monkey Do <[email protected]>
After #2991 , Last.FM imports are managed in the back-end, making this front-end manual import a duplicated we want to get rid of. Keep the mechanism as we still use it for Libre.FM imports, and rename the components accrodingly, making them work by default and primarily for LibreFM. Once we have converted LibreFM import as well we can get rid of the front-end importer components
it was in the import page previously, but now that LasftFM has moved to the connect services page the import-love-tracks feature also needed to be moved to be available there.
Add some more logic to show the "see full discography" button only if there are more than 4 rows in total across type categories. This can show up to 4 categories of one row, 2 categories of 2 rows, or 1 of 2 rows + 2 of one rows.
LB-1664: Only show "full discography" button when required
…eptune-plugin Update AddData.tsx with TIDAL + neptune client mod + plugin
…-BrainzBot Update AddData.tsx with Discord BrainzBot + tidying
| <h3>Flair Settings</h3> | ||
| <p> | ||
| Choose which flair you want your username to show to let other | ||
| users know you donated. ListenBrainz. | ||
| Unlocked by <Link to="/donate/">donating</Link>. Some flairs are |
There was a problem hiding this comment.
Can we also add a modal here explaining how do we calculate the time duration for which the flairs remain?
There was a problem hiding this comment.
Yes, I think this is crucial and currently missing, I had the same thought.
There was a problem hiding this comment.
Here's what I have, would love to hear @Aerozol's feedback as well:
There was a problem hiding this comment.
I thought this was important too, glad to see you're already onto it!
My usual text changes, take or leave as you please:
"Every $5 donated unlocks flair for 1 month. Larger donations will unlock multiple months of flair. Multiple donations will stack."
(I assume this is all correct now, after lucifer changed the donation calculation system?)
Two additional points (sorry!)
- We will have to mention that the flair isn't forever on the donations page as well - we can also add the same modal/modal text.
- Since it's getting a bit confusing we should probably show how many months of flair are left/have been built up :S This seems like the right place for it. e.g. "You have x days of flair remaining". (display nothing if they have not donated)
There was a problem hiding this comment.
Thanks for the suggested improvements!
I reworked the text a bit myself along the same lines, and added the same tooltip on the donate page.
Point # 2 about adding the unlock time left for a user is definitely a good idea, but I think probably best for a follow-up PR as I already stretched the scope of this one.
There was a problem hiding this comment.
Well I messed up and pushed commits to the feature branch directly instead of opening PR...
But here it is, using the existing nag-check endpoint to get the remaining days of unlock, or warn the user otherwise:
Tooltip is the same message as just above:
LB-1660: Sort by listen count on artist pages doesn't properly sort
Use link color only for anchor elements (default to regular text color), make inner span elements inline for display (otherwise they can wrap), and adjust the sliced effect position.
There was a problem hiding this comment.
The PR Looks really good now but some flairs are broken now.
The Flair Options Wave, Flip Horizontal, Flip Vertical, Flip 3D, and Tornado are broken, and I cannot see any animation.
It's probably after you tweeked some css as I can see here.
Yes, I realized too, thanks ! |
+ also uses the Username component at the top of the page
Remove deprecated manual LastFM importer
also adds the same explanation tooltip to the donate page
|
Hello @MonkeyDo! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:
|
Adding a new .less file with the CSS definitions for flair animations.
We'll want to review if we want to keep all of those, and think about others to add, but this should get us started nicely.
Add the
.flairCSS class along with one of the animation CSS classes (.shake,.flip-3d, etc.).Some of these effects require manipulating the text in one of two ways:
data-text="username"HTML attribute to the containing element , with the actual username of course